import React from 'react';



export default class Background extends React.Component {


  constructor(props) {
    super(props);

//在css中已经设定，三张图片所在的层次，第一张最高，第二张次之，第三张在最下面
    //初始状态下，第一图片显示在最上面，如果要显示下面的图片首先将图片的尺寸调到最大，通过滑轮事件将上层图片的显示逐渐减小，则显示出下面的图片了。
    //特别注意在临街值位置，由于滑轮滚动的像素数据在自然数上不是连续的，当还未达到了临界值时，可能直接跳过临界值，这时候就需要使用一些过界强势判定显示的手段。
    this.state = {
        height1: 773,
        height2: 0,
        height3: 0
    }
  }

  componentDidMount() {
    // document.getElementsByClassName('index_background1')[0].style.height;
    console.log("    document.getElementsByClassName('index_background1')[0].style.height;"+    document.getElementsByClassName('index_background1')[0].style.height);
    this.handleScroll = this.handleScroll.bind(this);
    document.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    document.removeEventListener('scroll',this.handleScroll);
  }

  handleScroll(e) {

    console.log(document.documentElement.scrollTop )
//隐藏第一张图片
    //当滑轮开始滚动，意味着一图片开始显示，另一张图片开始影藏
    //直接完全展开隐藏的图片，通过上层图片的逐渐隐藏的效果来显示下面一张图片的显示的效果。
    if (document.documentElement.scrollTop  <=773){
      this.setState({
        height1:773-document.documentElement.scrollTop,
        height2:773
      })

      console.log('h1 = '+this.state.height1);
    }

    //第一个停顿
    //这里停顿方便出，处理临界的问题
    //由于滑轮事件导致document.documentElement.scrollTop还未到达 773 就可能越过773，而这里的height又是直接计算而来，导致出现显示漏洞
    if (document.documentElement.scrollTop >773&&document.documentElement.scrollTop <=1273){
      this.setState({
        height1:0,
        height2:773
      })

      console.log('h1 = '+this.state.height1);
    }


    if (document.documentElement.scrollTop  > 1273&&document.documentElement.scrollTop <= 2046) {
      this.setState({
        height1:0,
        height2: 2046-(document.documentElement.scrollTop ),
        height3:773

      })
      console.log('h2 = '+this.state.height2);
    }

    //第二个停顿

    if (document.documentElement.scrollTop >2046){
      this.setState({
        height1:0,
        height2:0,
        height3:773
      })

      console.log('h1 = '+this.state.height1);
    }

  }

  render() {
    return <div className='background_content'>
      <div className="index_background1" style={{height:this.state.height1+'px'}}>

      </div>
      <div className="index_background2" style={{height:this.state.height2+'px'}}>
        {/*style={{height:this.state.style.height+'%'}}*/}
      </div>
      <div className="index_background3" style={{height:this.state.height3+'px'}}>

      </div>
    </div>;

  }
}
